/*
* Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
* All rights reserved.
* This component and the accompanying materials are made available
* under the terms of "Eclipse Public License v1.0"
* which accompanies this distribution, and is available
* at the URL "http://www.eclipse.org/legal/epl-v10.html".
*
* Initial Contributors:
* Nokia Corporation - initial contribution.
*
* Contributors:
*
* Description:  main.qml.
*/

import QtQuick 1.0
import NfcNppExample 1.0
import QtMobility.feedback 1.1

/*!
 *  \file
 *  \brief Defines the UI of the NFC NPP Example application.
 *
 *  Provides dialog for showing a message dialog on connect event. Uses Button
 *  to toggle between NFC Record types and to send messages. Also a simple list view
 *  is used to show the received messages.
 */
 
Rectangle {
    id: window
    width: 360
    height: 640

    property int recordType: 0

    NfcNppExample {
        id: nfcNppExample

        onMessageReceived: {
            if ( type == 'U' ) {
                messageModel.append( {"receivedType": type,
                                      "nfcRecordData": "<a href=\"" + messageData + "\">" + messageData +"</a>"} )
            }
            else {
                messageModel.append( {"receivedType": type, "nfcRecordData": messageData } )
            }
        }
        onTargetConnected: {
            pressEffect.play()
            dialogLabel.text = "Message sent."
            informationDialog.visible = true
            closeDialogTimer.restart()
        }
    }

    Rectangle {
        id: editorArea
        z: 1
        height: parent.height > parent.width ?  parent.height / 3 : parent.height / 2
        width: parent.width
        color: "steelblue"

        border.width: 1
        radius: 5

        Button {
            id: recordTypeChange

            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: 20
            }
            width: 240
            height: 40
            label: "Change Record Type"

            onButtonClicked: recordType = 1 - recordType;
        }

        Text {
            id: recordTypeText
            text: recordType == 0 ? "Record Type: Text" : "Record Type: URI"
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: recordTypeChange.bottom
                topMargin: 10
            }
        }

        Rectangle {
            id: sendTextEdit
            width: 300
            height: 40
            color: "white"
            radius: 5
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: recordTypeText.bottom
                topMargin: 5
            }
            TextInput {
                id: sendText
                text: recordType == 0 ? "Default text" : "http://nokia.com"
                font.pointSize: 9
                width: 300
                anchors {
                    fill: parent
                    topMargin: 5
                    leftMargin: 5
                }
            }
        }

        Button {
            label: "Send"
            width: 100
            height: 40
            onButtonClicked: nfcNppExample.sendMessage( recordType == 0 ? "T" : "U", sendText.text)
            anchors {
                top: window.height > window.width ? sendTextEdit.bottom : sendTextEdit.top
                topMargin: window.height > window.width ? 20 : 0
                left: window.height > window.width ? parent.left : sendTextEdit.right
                leftMargin: window.height > window.width ? (parent.width/2)-(width/2) : 20
            }
        }
    }

    // Defines the NDEF message area where the received messages are shown.
    Rectangle {
        id: messageArea
        z: 0
        height: parent.height > parent.width ?  parent.height / 3 * 2 : parent.height / 2 
        anchors { top: editorArea.bottom }
        width: parent.width
        color: "lightsteelblue"
        border.width: 1
        radius: 5

        ListModel {
            id: messageModel
        }
          
        ListView {
            id: messageView
            model: messageModel
            delegate: Text {
                    font.pointSize: 10
                    textFormat: Text.RichText
                    text: (receivedType == 'T' ? "Text: " : "URI: ") + nfcRecordData
                    onLinkActivated: {
                        pressEffect.play()
                        Qt.openUrlExternally( link )
                    }
                }
            onCountChanged: positionViewAtIndex(count - 1, ListView.End)
            anchors.fill: parent
            anchors.topMargin: 10
            anchors.leftMargin: 10
        }

        // Exit text
        Text {
            x: parent.width - width - 10
            y: parent.height - height
            width: 60;
            height: 60;
            text: "Exit"
            color: "steelblue"
            style: Text.Sunken
            font.pointSize: 10
            font.weight: Font.Bold
            textFormat: Text.RichText
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    pressEffect.play()
                    Qt.quit()
                }
            }
        }
    }

    // "Message sent." dialog.
    Rectangle {
        id: informationDialog
        height: 50
        width: 300
        anchors.centerIn: parent
        color:  "lightgray"
        opacity: 0.8
        radius:  5
        border.width: 1
        visible: false
        z: 2

        Text {
            id: dialogLabel
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            anchors.fill:  parent
            font.pointSize: 10
        }

        Timer {
            id: closeDialogTimer
            interval: 2000
            running: false
            repeat: false
            onTriggered: informationDialog.visible = false
        }
    }

    ThemeEffect {
         id: pressEffect
         effect: ThemeEffect.BasicButton
        }
    ThemeEffect {
         id: releaseEffect
         effect: ThemeEffect.SensitiveButton
        }
}
